<template>
	<view class="setup">
		<!-- S 顶部导航 -->
		<sol-navbar title="设置"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 账号设置 -->
		<view class="setup-label">账号设置</view>
		<view class="setup-cell">
			<view class="setup-cell__item" @click="fnNavigateToPage('edit-info')">
				<text class="setup-cell__item-text">编辑资料</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
			<view class="setup-cell__item" @click="fnNavigateToPage('home-access')">
				<text class="setup-cell__item-text">主页访问限制</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
			<view class="setup-cell__item setup-cell__item-last">
				<text class="setup-cell__item-text">绑定提款账号</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
		</view>
		<!-- E 账号设置 -->

		<!-- S 通知设置 -->
		<view class="setup-label">通知设置</view>
		<view class="setup-cell">
			<view class="setup-cell__item">
				<text class="setup-cell__item-text">留言提醒</text>
				<sol-switch :checked="true"></sol-switch>
			</view>
			<view class="setup-cell__item">
				<text class="setup-cell__item-text">订阅提醒</text>
				<sol-switch :checked="true"></sol-switch>
			</view>
			<view class="setup-cell__item setup-cell__item-last">
				<text class="setup-cell__item-text">群聊提醒</text>
				<sol-switch :checked="false"></sol-switch>
			</view>
		</view>
		<!-- E 通知设置 -->

		<!-- S 更多 -->
		<view class="setup-label">更多</view>
		<view class="setup-cell">
			<view class="setup-cell__item">
				<text class="setup-cell__item-text">关于孤独菌</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
			<view class="setup-cell__item">
				<text class="setup-cell__item-text">邀请好友</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
			<view class="setup-cell__item">
				<text class="setup-cell__item-text">检查更新</text>
				<view class="setup-cell__item-badge">NEW</view>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
			<view class="setup-cell__item setup-cell__item-last">
				<text class="setup-cell__item-text">退出账号</text>
				<image class="setup-cell__item-icon" src="/static/icon-default/icon_arrow_right.png" mode="scaleToFill">
				</image>
			</view>
		</view>
		<!-- E 更多 -->

		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "Setup",
		data() {
			return {
				// 列表暂时没做渲染方式
			};
		},
		computed: {},
		methods: {
			// 跳转页面
			fnNavigateToPage(type) {
				this.$log(this.$options.name, type);
				let url = null;
				switch (type) {
					case "edit-info": // 编辑资料
						url = '/pages/account/edit-info/edit-info';
						break;
					case "home-access": // 主页访问限制
						url = '/pages/setup/home-access/home-access';
						break;
					default:
						break;
				}
				// 携带参数跳转
				if (!url) return;
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.setup {
		min-height: 100vh;
		background-color: $--color-background;

		// 标签文字
		&-label {
			padding: 36rpx 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #878787;
		}

		// 选项
		&-cell {
			background-color: $--color-block;
			margin-left: 28rpx;
			margin-right: 28rpx;
			border-radius: 24rpx;

			&__item {
				height: 112rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 28rpx;
				border-bottom: 2rpx solid #5d5d5d;

				&-text {
					flex-grow: 1;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DDDDDD;
				}

				&-badge {
					font-size: 24rpx;
					color: #484744;
					background-color: #f9d42e;
					padding: 2rpx 18rpx;
					font-weight: bold;
					border-radius: 28rpx;
				}

				&-icon {
					width: 32rpx;
					height: 32rpx;
					overflow: hidden;
					padding-left: 24rpx;
				}

				&-last {
					border-bottom: none;
				}
			}
		}
	}
</style>
